<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>转账汇款</title>

    <script src="static/js/jquery-3.4.1.min.js" type="text/javascript"></script>


    <style type="text/css">
        body {
            background-color: #00b38a;
            text-align: center;
        }

        .lp-login {
            position: absolute;
            width: 500px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-top: -250px;
            margin-left: -250px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px #12a591;
            padding: 57px 50px 35px;
            box-sizing: border-box
        }


        .lp-login .submitBtn {
            display: block;
            text-decoration: none;
            height: 48px;
            width: 150px;
            line-height: 48px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            background-image: -webkit-gradient(linear, left top, right top, from(#09cb9d), to(#02b389));
            background-image: linear-gradient(90deg, #09cb9d, #02b389);
            border-radius: 3px
        }


        input[type='text'], input[type='number'] {
            height: 30px;
            width: 250px;
        }

        span {
            font-style: normal;
            font-variant-ligatures: normal;
            font-variant-caps: normal;
            font-variant-numeric: normal;
            font-variant-east-asian: normal;
            font-weight: normal;
            font-stretch: normal;
            font-size: 14px;
            line-height: 22px;
            font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial, "Helvetica Neue", Helvetica, serif;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            let $fromElem = $("#fromAccount");
            let $toElem = $("#toAccount");
            $("#switch").on("click", () => {
                let fromAccount = $fromElem.val();
                let toAccount = $toElem.val();
                $fromElem.val(toAccount);
                $toElem.val(fromAccount);
            });
            $(".submitBtn").bind("click", () => {
                let fromAccount = $fromElem.val();
                let toAccount = $toElem.val();
                let money = $("#money").val();

                if (money == null || $.trim(money).length === 0) {
                    alert("sorry,必须输入转账金额~");
                    return;
                }

                $.ajax({
                    url: '/transfer',
                    type: 'POST',    //GET
                    async: false,    //或false,是否异步
                    data: JSON.stringify({
                        "fromCardNo": fromAccount.split(' ')[1],
                        "toCardNo": toAccount.split(' ')[1],
                        "money": money
                    }),
                    contentType: "application/json;charset=utf-8",
                    timeout: 5000,    //超时时间
                    dataType: 'json', //返回的数据格式：json/xml/html/script/jsonp/text
                    success: (resp) => {
                        if (resp.success) {
                            if (fromAccount.includes("￥")) {
                                fromAccount = fromAccount.substring(0, fromAccount.indexOf("￥") + 1) + resp.data['fromMoney'];
                            } else {
                                fromAccount = fromAccount + " ￥" + resp.data['fromMoney'];
                            }
                            if (toAccount.includes("￥")) {
                                toAccount = toAccount.substring(0, toAccount.indexOf("￥") + 1) + resp.data['toMoney'];
                            } else {
                                toAccount = toAccount + " ￥" + resp.data['toMoney'];
                            }
                            $fromElem.val(fromAccount);
                            $toElem.val(toAccount);
                            $("#msg").text("转账成功。");
                        } else {
                            alert(resp['errorMessage']);
                        }
                    },
                    error: (resp) => {
                        alert("后台请求失败，原因：" + resp.responseText);
                    }
                })
            })
        })

        //检查输入值是否为整数
        function checkFormat(obj) {
            let reg = /^[0-9]+[0-9]*]*$/;
            if ($.trim($(obj).val()).length > 0) {
                if (!reg.test($(obj).val())) {
                    alert("输入格式错误！请输整数！");
                    $(obj).val("");
                } else {
                    $(obj).val(parseInt($(obj).val()));
                }
            }
        }
    </script>
</head>
<body>


<form>
    <table class="lp-login">
        <tr>
            <td colspan="2" style="text-align: center;">
                <input id="switch" type="checkbox" value="0">
                <label for="switch">交换</label>
            </td>
        </tr>
        <tr>
            <td style="text-align: right"><label for="toAccount">收款账户</label></td>
            <td style="text-align: center">
                <input disabled id="toAccount" type="text" value="韩梅梅 6029621011001"/>
            </td>
        </tr>
        <tr>
            <td style="text-align: right"><label for="fromAccount">付款账户</label></td>
            <td style="text-align: center">
                <input disabled id="fromAccount" type="text" value="李大雷 6029621011000"/>
            </td>
        </tr>
        <tr>
            <td style="text-align: right"><label for="money">转账金额</label></td>
            <td style="text-align: center">
                <input id="money" onblur="checkFormat(this)" type="number" value="200"/>
            </td>
        </tr>
        <tr style="text-align: center">
            <td colspan="2">
                <a class="submitBtn" href="#"><span>转 出</span></a>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center; color:green;" id="msg"></td>
        </tr>
    </table>
</form>

</body>
</html>
